<template>
	<view>
		<view class="wrap">
			

			<scroll-view scroll-x="true" class="data-list" @scrolltolower="scrolltolower">
				<view v-for="(item, index) in atlasList" @click="changeTab(item.atlasId,item.atlasName)" :key="index"
					class="data-list-item" :class="{active:item.atlasId==atlasId}">
					<view class="imgCont">
						<view class="bgs">
							<view class="image">
								<image class="image1" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/fengmian.png">
								</image>
							</view>

							<view class="mask">
								<view class="num">
									{{item.count}}+
								</view>
									<image class="narrow" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/se1l.png" mode=""></image>
							</view>
						</view>
						<image class="decoration" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/gallery/decoration.png" mode="">
					</view>
					<view class="name">
						{{item.atlasName}}
					</view>

				</view>
			</scroll-view>
			<view class="waterfall">
				<view v-if="list1.length" class="">
					
					<pcmoreList :list="list1" :atlasName="atlasName" :atlasId="atlasId" :taskId="taskId" :movId="movId"
						:creatorId="creatorId" :accountId="accountId" :suffix="pcSuffix" />
					<uni-load-more :status="status"></uni-load-more>
				</view>
				
				<view v-else class="empty">
					<u-empty src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png" v-if="!list1.length && senDate" text="暂无数据" mode="list"></u-empty>
				</view>
				<!-- <waterfall :list="resourcesList" :atlasName="atlasName" :atlasId="atlasId" :taskId="taskId"
					:movId="movId" :creatorId="creatorId" :accountId="accountId" :suffix="pcSuffix" />
				<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30"
					margin-top="10" margin-bottom="10" />
				<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
					src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/nodata!.png"></u-empty> -->
			</view>
		</view>
	</view>

</template>
<script>
	import pcmoreList from './pcmoreList';
	export default {
		components: {
			pcmoreList,
		},
		data() {
			return {
				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
					topic: "",
				},
				status: "more",
				senDate: false,
				list1: [],
				cur: 0,
				// 任务ID
				taskId: 0,
				// 模版ID
				movId: 0,
				// 创作者ID
				creatorId: 0,
				// 账号ID
				accountId: 0,
				// 图集ID
				atlasId: 0,
				// 图集名称
				atlasName: '',
				// 图集列表
				atlasList: [],
				// 图集总数
				atlasTotal: 0,
				// 图集页数
				atlasPage: 1,
				// 图集每页条数
				atlasSize: 7,
				// 图集列表
				resourcesList: [],
				// 图集总数
				resourcesTotal: 0,
				// 页数
				resourcesPage: 1,
				// 每页条数
				resourcesSize: 10,
				// 加载状态
				status: "loading",
				// 数据为空
				isEmpty: false,
				pcSuffix: '',
			};
		},
		onLoad(options) {
			this.pcSuffix = uni.getStorageSync('pcSuffix');
			// 任务ID
			this.taskId = options.taskId ?? 0;
			// 模版ID
			this.movId = options.movId ?? 0;
			// 创作者ID
			this.creatorId = options.creatorId ?? 0;
			// 账号ID
			this.accountId = options.accountId ?? 0;
			// 图集ID
			this.atlasId = options.atlasId

			// token存在
			// if (uni.getStorageSync('token')) {
				// 获取图集列表
				this.getAtlasList()
				// 获取资源列表
				this.getlist()
			// } else {
			// 	// 校验token
			// 	this.checkToken();
			// }
		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;
		
				this.getlist();
		
			} else {
				this.status = "noMore"; //加载完状态
				console.log("已加载全部数据");
			}
		},
		methods: {
			// 获取图集列表
			getlist() {
				this.senDate = false;
				
				
				
				this.$u.api.atlas.getResourcesList({
						page: this.formData.page,
						rows: this.formData.pageSize,
						atlasId: this.atlasId
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 200) {
							this.total = res.data.total;
							this.list1 = this.list1.concat(res.data.list);
							
							
							
							console.log(this.list1.length,'********',this.formData.pageSize);
							
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
						} else {
							console.log("请求数据失败");
						}
					});
			},
			// 校验token
			checkToken() {
				let checkTokenTimer = setInterval(res => {
					// token 存在
					if (uni.getStorageSync('token')) {
						// 清除计时器
						clearInterval(checkTokenTimer)
						// 获取图集列表
						this.getAtlasList()
						// 获取资源列表
						this.getResourcesList(this.atlasId)
					}
				}, 500)
			},
			// 图集列表滚动条右滑
			scrolltolower() {
				let allTotal = this.atlasPage * this.atlasSize;
				if (allTotal < this.atlasTotal) {
					//当前条数小于总条数 则增加请求页数
					this.atlasPage++;
					this.getAtlasList();
				}
			},
			// 获取图集列表
			getAtlasList() {
				this.$u.api.atlas.getList({
					atlasId: this.atlasId,
					page: this.atlasPage,
					size: this.atlasSize,
				}).then(res => {
					if (res.code != 200) {
						uni.showModal({
							title: '图集加载失败',
							content: '请刷新后重试或重启小程序',
							showCancel: false,
							confirmText: '知道了'
						})
						return;
					}
					// 图集列表总数
					this.atlasTotal = res.data.total;

					// 页数大于1则追加
					if (this.atlasPage > 1) {
						this.atlasList.push(...res.data.list);
					} else {
						this.atlasList = res.data.list
					}
				})
			},
			// 更改图集
			changeTab(atlasId, atlasName) {
				console.log(this.cur)
				this.isEmpty = false
				// 重置图集ID
				this.atlasId = atlasId
				// 重置图集名
				this.atlasName = atlasName
				// 重置页数
				this.formData.page = 1
				// 加载中状态
				this.status = "loading";
				// 重置资源列表
				this.list1 = []
				// 重新获取图集资源列表
				this.getlist();
			},

			// 获取资源列表
			getResourcesList(atlasId) {
				this.$u.api.atlas.getResourcesList({
					atlasId: atlasId,
					page: this.resourcesPage,
					size: this.resourcesSize,
					appletId: this.vuex_appletId
				}).then(res => {
					if (res.code != 200) {
						uni.showModal({
							title: '图片加载失败',
							content: '请刷新后重试或重启小程序',
							showCancel: false,
							confirmText: '知道了'
						})
						return;
					}

					// 资源列表总数
					this.resourcesTotal = res.data.total;

					// 页数大于1则追加
					if (this.resourcesPage > 1) {
						this.resourcesList.push(...res.data.list);
					} else {
						this.resourcesList = res.data.list
					}

					// 数据为空
					if (this.resourcesList.length == 0) {
						this.isEmpty = true
					}
					if (this.resourcesSize > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}
				})
			}
		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 0 0 32rpx;


		.title {
			font-size: 36rpx;
			font-family: PingFang SC-Light, PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
			line-height: 42rpx;
		}

	}

	.waterfall {
		margin-right: 32rpx;
	}


	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 10rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 24rpx;
		height: 210rpx;
		// background: orange;
		overflow: hidden;

		.imgCont {
			position: relative;

			// height: 157rpx;
			// display: flex;
			// flex-direction: column;

			.bgs {
				position: relative;

				.mask {
					// background: red;
					background: rgba(255, 255, 255, 0.11);
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					
					width: 143rpx;
					height: 143rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;
					overflow: hidden;

					.narrow {
						width: 60rpx;
						height: 60rpx;
						position: absolute;
						bottom: 0rpx;
						right: 0rpx;
						display: none;
					}

					.num {
						display: inline-flex;
						padding: 4rpx 12rpx;
						background: rgba(0, 0, 0, 0.40);
						border-radius: 33rpx;
						font-size: 20rpx;
						font-family: PingFang HK-Regular, PingFang HK;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}

			.image {
				width: 143rpx;
				height: 143rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.image1 {
					width: 100%;
					height: 100%;
				}

				// border: 6rpx solid transparent !important;
			}

			.decoration {
				position: absolute;
				bottom: -14rpx;
				left: 8rpx;
				width: 127rpx;
				height: 14rpx;
				// margin: 0rpx auto 0;
			}
		}

		&.active {
			.narrow {
				display: block !important;
			}

			.decoration {

				margin: 0 auto;
			}

			.image {
				border: 6rpx solid #FFFFFF !important;
				box-shadow: 0px 0px 6px 0px #FFFFFF;
			}
		}


		.name {
			// background: red;
			font-size: 25rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;
			margin-top: 25rpx;
			text-align: center;
			width: 73px;
			height: 35rpx;
			/* 不同浏览器有不同的前缀，比如-moz-box */
			display: -webkit-box;
			/* 子元素的排列方式：垂直排列 */
			-webkit-box-orient: vertical;
			/* 设置3行文本之后打点显示 */
			-webkit-line-clamp: 1;
			/* 超出盒子部分隐藏显示 */
			overflow: hidden;
		}
	}
</style>